<template>
  <div class="my-comments">
    <hm-header>
      <template #center>
        <div>我的跟帖</div>
      </template>
    </hm-header>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad">
      <div class="my-comments-item" v-for="item in myCommentList" :key="item.id">
        <div class="time">{{ item.create_date | formatDate('YYYY-MM-DD HH:mm') }}</div>
        <div class="parentComment" v-if="item.parent">
          <div class="reply-user">回复：{{ item.parent.user.nickname }}</div>
          <div class="reply-content">{{ item.parent.content }}</div>
        </div>
        <div class="my-content">{{ item.content }}</div>
        <div class="original-text one-txt-cut">原文：{{ item.post.title}}</div>
      </div>
    </van-list>
  </div>
</template>

<script>
export default {
  data () {
    return {
      myCommentList: [],
      pageIndex: 1,
      pageSize: 5,
      loading: false,
      finished: false
    }
  },

  created () {
    this.getMyComments()
  },

  methods: {
    async getMyComments () {
      const { data: res } = await this.$axios.get('/user_comments', {
        params: {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize
        }
      })
      const { data, statusCode } = res
      if (statusCode !== 200) {
        return this.$toast('获取评论失败')
      }
      this.myCommentList = [...this.myCommentList, ...data]
      if (data.length === this.pageSize) {
        return true
      }
    },

    // 处理触底事件
    async onLoad () {
      console.log('触底了')
      this.pageIndex++
      const finished = await this.getMyComments()
      this.loading = false
      this.finished = !finished
    }
  }
}
</script>

<style lang="scss" scoped>
.my-comments-item {
  padding: 20px;
  padding-bottom: 10px;
  font-size: 14px;
  color: #8b8b8b;
  border: 1px solid #eee;
  .parentComment {
    background-color: #e4e4e4;
    padding: 12px 10px;
    margin-top: 10px;
    border-radius: 5px;
    .reply-user {
      font-size: 12px;
      margin-bottom: 6px;
    }
  }
  .my-content {
    margin: 10px 0 12px;
    color: #000;
  }
  .original-text {
    font-size: 13px;
  }
}
</style>
